<template>
  <div class="safety">
    <div class="back" @click="back"></div>
    <div class="page-top">
      市场安全
    </div>
    <div class="safety-main">
      <div class="public-section-965">
        <div class="section-title">
          疫情防控
        </div>
        <div class="yqfk-section1">
          <div id="yqfk-radar" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="change-btns-big">
          <div class="change-btns-big-item" style="width: 285px;" :class="{'change-btns-big-selected': yqfkBtnIndex === 1}" @click="yqfkBtnChange(1)">出入场管理</div>
          <div class="change-btns-big-item" style="width: 285px;" :class="{'change-btns-big-selected': yqfkBtnIndex === 2}" @click="yqfkBtnChange(2)">环境消杀</div>
        </div>
        <div style="width: 100%;" v-show="yqfkBtnIndex === 1">
          <div class="yqfk-section2">
            <div class="yqfk-section2-img">衢通码</div>
            <div class="yqfk-section2-item" style="margin-left: 70px;">
              <div class="num-down">↓23.5%</div>
              <div class="item-num">1837</div>
              <div class="item-title">扫码（次）</div>
            </div>
            <div class="yqfk-section2-item" style="margin-left: 20px;">
              <div class="num-up">↑23.5%</div>
              <div class="item-num">12</div>
              <div class="item-title">异常预警（次）</div>
            </div>
          </div>
          <div class="safety-list-title">
            <div class="safety-list-title-item" style="width: 33%;">姓名</div>
            <div class="safety-list-title-item" style="width: 33%;">性别</div>
            <div class="safety-list-title-item" style="width: 33%;">衢通码</div>
          </div>
          <div class="safety-list-box">
            <vue-seamless-scroll
                :data="yqfkListData"
                class="seamless-warp"
                :class-option="classOption">
              <div v-for="(item, index) in yqfkListData" :key="index" class="safety-list-box-item">
                <div class="item-section" style="width: 33%;">{{item.name}}</div>
                <div class="item-section" style="width: 33%;">{{item.job}}</div>
                <div class="item-section" style="width: 33%;">{{item.work}}</div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div class="ls-inf0">
            申报登记（条） <span style="font-size: 42px;color: #00F6FF">156</span> <span style="font-size: 16px;color: #00FF9D">↓6.8%</span>
          </div>
          <div class="left-bottom-anm1">
            <vue-seamless-scroll
                :data="carListData"
                class="left-bottom-anm1"
                :class-option="classOption1">
              <div class="yqfk-section3"  style="display: inline-block;" v-for="(item, index) in carListData" :key="index">
                <div class="yqfk-section3-item">
                  <div class="item-title">车牌号：</div>
                  <div class="item-text" style="width: 90px;">{{ item.carCard }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">车辆类型：</div>
                  <div class="item-text" style="width: 50px;">{{ item.carType }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title" style="width: 90px;">车辆来源地：</div>
                  <div class="item-text" style="width: 100px;">{{ item.from }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">司机姓名：</div>
                  <div class="item-text" style="width: 90px;">{{ item.name }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">联系方式：</div>
                  <div class="item-text" style="width: 95px;">{{ item.tel }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title" style="width: 45px;">货物：</div>
                  <div class="item-text" style="width: 100px;">{{ item.goods }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">入场时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.enterTime }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">出场时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.leaveTime }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div class="yqfk-section4">
            <div class="yqfk-section4-img">
              <div id="car-line" style="width: 100%;height: 100%;"></div>
            </div>
            <div class="yqfk-section4-text">
              <span style="font-size: 18px;color: #00F6FF">进出车辆</span><br>
              <span style="font-size: 22px">进</span> &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">100</span> &nbsp;&nbsp;<span style="color: #00FF9D;font-size: 20px">↓</span>&nbsp;&nbsp;<span style="color: #00FF9D">23.5%</span><br>
              <span style="font-size: 22px">出</span> &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">10</span> &nbsp;&nbsp;<span style="color: #FF0000;font-size: 20px">↑</span>&nbsp;&nbsp;<span style="color: #FF0000">23.5%</span>
            </div>
          </div>
          <div class="left-bottom-anm1" style="margin-top: 10px;">
            <vue-seamless-scroll
                :data="carListData"
                class="left-bottom-anm1"
                :class-option="classOption2">
              <div class="yqfk-section3"  style="display: inline-block;" v-for="(item, index) in carListData" :key="index">
                <div class="yqfk-section3-item">
                  <div class="item-title">车牌号：</div>
                  <div class="item-text" style="width: 90px;">{{ item.carCard }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">车辆类型：</div>
                  <div class="item-text" style="width: 50px;">{{ item.carType }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title" style="width: 90px;">车辆来源地：</div>
                  <div class="item-text" style="width: 100px;">{{ item.from }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">司机姓名：</div>
                  <div class="item-text" style="width: 90px;">{{ item.name }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">联系方式：</div>
                  <div class="item-text" style="width: 95px;">{{ item.tel }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title" style="width: 45px;">货物：</div>
                  <div class="item-text" style="width: 100px;">{{ item.goods }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">入场时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.enterTime }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">出场时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.leaveTime }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <div style="width: 100%;" v-if="yqfkBtnIndex === 2">
          <div class="ls-inf0">
            今日消杀（次） <span style="font-size: 42px;color: #00F6FF">33</span> <span style="font-size: 16px;color: #00FF9D">↓23.5%</span>
          </div>
          <div class="hjxs-img">
            <img src="../assets/images/temp/temp_market2.jpeg" alt="">
          </div>
          <div class="safety-list-title" style="margin-top: 24px;">
            <div class="safety-list-title-item" style="width: 33%;">消杀时间</div>
            <div class="safety-list-title-item" style="width: 33%;">消杀区域</div>
            <div class="safety-list-title-item" style="width: 33%;">消杀人员</div>
          </div>
          <div class="safety-list-box1">
            <vue-seamless-scroll
                :data="xsListData"
                class="safety-list-box1"
                :class-option="classOption3">
              <div v-for="(item, index) in xsListData" :key="index" class="safety-list-box1-item">
                <div class="item-section" style="width: 33%;">{{item.time}}</div>
                <div class="item-section" style="width: 33%;">{{item.area}}</div>
                <div class="item-section" style="width: 33%;">{{item.name}}</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="safety-center">
        <div class="public-section-470">
          <div class="section-title">
            食品安全
          </div>
          <div class="span-section1">
            <div class="span-section1-radar">
              <div id="spaq-radar" style="width: 100%;height: 100%;"></div>
            </div>
            <div class="span-section1-radar">
              <div class="yqfk-section2-item" style="width: 145px;">
                <div class="num-down" style="margin-top: 40px;">↓13.2%</div>
                <div class="item-num">189</div>
                <div class="item-title">检测批次数</div>
              </div>
              <div class="yqfk-section2-item" style="width: 145px;">
                <div class="num-down" style="margin-top: 40px;">↓13.2%</div>
<!--                <div class="num-up" style="margin-top: 40px;">↓13.2%</div>-->
                <div class="item-num">12</div>
                <div class="item-title">问题批次数</div>
              </div>
            </div>
          </div>
          <div class="span-section2">
            <div class="span-section2-part">
              <div class="ls-inf0" style="height: 65px;line-height: 65px;">
<!--                合格率 <span style="font-size: 42px;color: #00F6FF">94%</span> <span style="font-size: 16px;color: #00FF9D">↓6.8%</span>-->
                合格率 &nbsp;&nbsp;<span style="font-size: 42px;color: #00F6FF">5.2%</span> <span style="font-size: 16px;color: #FF0000">&nbsp;&nbsp;↑5.2%</span>
              </div>
              <div class="ls-inf0" style="height: 65px;line-height: 65px;">
                处置率 &nbsp;&nbsp;<span style="font-size: 42px;color: #FF0000">3.2%</span> <span style="font-size: 16px;color: #00FF9D">&nbsp;&nbsp;↓6.8%</span>
<!--                处置率 <span style="font-size: 42px;color: #FF0000">94%</span> <span style="font-size: 16px;color: #FF0000">↑5.2%</span>-->
              </div>
            </div>
            <div class="span-section2-part">
              <div id="spaq-bar" style="width: 100%;height: 100%;"></div>
            </div>
          </div>
          <div class="span-section3-box">
            <el-carousel
                indicator-position="none"
                :interval="5000"
                height="100px">
              <el-carousel-item v-for="(item, index) in goodsListData" :key="index">
                <div class="spaq-section3" style="width: 580px;">
                  <div class="spaq-section3-item">
                    <div class="item-title">商品：</div>
                    <div class="item-text" style="width: 110px;">{{ item.goods }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">品种：</div>
                    <div class="item-text" style="width: 110px;">{{ item.kinds }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">检测批次：</div>
                    <div class="item-text" style="width: 110px;">{{ item.NO }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">检测项目：</div>
                    <div class="item-text" style="width: 110px;">{{ item.item }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">检测结果：</div>
                    <div class="item-text" style="width: 110px;">{{ item.result }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">经营户：</div>
                    <div class="item-text" style="width: 110px;">{{ item.operator }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">供货时间：</div>
                    <div class="item-text" style="width: 110px;">{{ item.supTime }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">检测时间：</div>
                    <div class="item-text" style="width: 110px;">{{ item.checkTime }}</div>
                  </div>
                  <div class="spaq-section3-item">
                    <div class="item-title">处置情况：</div>
                    <div class="item-text" style="width: 110px;">{{ item.isDeal }}</div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>

          </div>
        </div>
        <div class="public-section-470" style="margin-top: 24px;">
          <div class="section-title">
            检测分析预警
          </div>
          <div class="jcyfx-section1">
            <div class="jcyfx-section1-part">
              <div id="jcyj-bar" style="width: 100%;height: 100%;"></div>
            </div>
            <div class="jcyfx-section1-part">
              <div id="jcyj-pie" style="width: 100%;height: 100%;"></div>
            </div>
          </div>
          <div class="row-info">
            高风险经营户 <span style="color: #FF0000">6</span> 家
          </div>
          <div class="safety-list-title" style="margin-top: 0;">
            <div class="safety-list-title-item" style="width: 15%;">经营户</div>
            <div class="safety-list-title-item" style="width: 15%;">类型</div>
            <div class="safety-list-title-item" style="width: 35%;">统一社会信用代码/身份证号</div>
            <div class="safety-list-title-item" style="width: 15%;">负责人</div>
            <div class="safety-list-title-item" style="width: 20%;">联系电话</div>
          </div>
          <div class="safety-list-box" style="height: 38px;">
            <vue-seamless-scroll
                :data="gfxjyhListData"
                class="seamless-warp"
                :class-option="classOption">
              <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
                <div class="item-section" style="width: 15%;">{{item.name}}</div>
                <div class="item-section" style="width: 15%;">{{item.type}}</div>
                <div class="item-section" style="width: 35%;">{{item.num}}</div>
                <div class="item-section" style="width: 15%;">{{item.master}}</div>
                <div class="item-section" style="width: 20%;">{{item.tel}}</div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div class="row-info">
            高风险供货商 <span style="color: #FF0000">6</span> 家
          </div>
          <div class="safety-list-title" style="margin-top: 0;">
            <div class="safety-list-title-item" style="width: 15%;">供货商</div>
            <div class="safety-list-title-item" style="width: 15%;">类型</div>
            <div class="safety-list-title-item" style="width: 35%;">统一社会信用代码/身份证号</div>
            <div class="safety-list-title-item" style="width: 15%;">负责人</div>
            <div class="safety-list-title-item" style="width: 20%;">联系电话</div>
          </div>
          <div class="safety-list-box" style="height: 38px;">
            <vue-seamless-scroll
                :data="ghsListData"
                class="seamless-warp"
                :class-option="classOption">
              <div v-for="(item, index) in ghsListData" :key="index" class="safety-list-box-item">
                <div class="item-section" style="width: 15%;">{{item.name}}</div>
                <div class="item-section" style="width: 15%;">{{item.type}}</div>
                <div class="item-section" style="width: 35%;">{{item.num}}</div>
                <div class="item-section" style="width: 15%;">{{item.master}}</div>
                <div class="item-section" style="width: 20%;">{{item.tel}}</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="public-section-965">
        <div class="section-title">
          消防安全
        </div>
        <div class="yqfk-section1">
          <div id="xfaq-radar" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="change-btns-big">
          <div class="change-btns-big-item" style="width: 285px;" :class="{'change-btns-big-selected': xfaqBtnIndex === 1}" @click="xfaqBtnChange(1)">综合评估</div>
          <div class="change-btns-big-item" style="width: 285px;" :class="{'change-btns-big-selected': xfaqBtnIndex === 2}" @click="xfaqBtnChange(2)">消防预警</div>
        </div>
        <div style="width: 100%;" v-if="xfaqBtnIndex === 1">
          <div class="zhpg-section1">
            <div class="zhpg-section1-item">
              <div class="item-num">15</div>
              <div class="item-img"><img src="../assets/images/marketSafety/zhpg_blue.png" alt=""></div>
              <div class="item-title">当日预警数量</div>
            </div>
            <div class="zhpg-section1-item">
              <div class="item-num">8</div>
              <div class="item-img"><img src="../assets/images/marketSafety/zhpg_green.png" alt=""></div>
              <div class="item-title">已处置预警</div>
            </div>
            <div class="zhpg-section1-item">
              <div class="item-num">7</div>
              <div class="item-img"><img src="../assets/images/marketSafety/zhpg_red.png" alt=""></div>
              <div class="item-title">未处置预警</div>
            </div>
          </div>
          <div class="zhpg-section2">
            <div class="zhpg-section2-half">
              <div class="half1-item">
                <div class="half1-item-part1">巡查点</div>
                <div class="half1-item-part2">
                  <div class="part2-num">48</div>
                  <div class="part2-title">已完成</div>
                </div>
                <div class="half1-item-part2">
                  <div class="part2-num" style="color: #FF0000">13</div>
                  <div class="part2-title">未完成</div>
                </div>
              </div>
              <div class="half1-item" style="margin-top: 9px;">
                <div class="half1-item-part1">已巡查点</div>
                <div class="half1-item-part2">
                  <div class="part2-num">42</div>
                  <div class="part2-title">正常</div>
                </div>
                <div class="half1-item-part2">
                  <div class="part2-num" style="color: #FF0000">6</div>
                  <div class="part2-title">异常</div>
                </div>
              </div>
            </div>
            <div class="zhpg-section2-half">
              <div id="zhpg-pie" style="width: 100%;height: 100%;"></div>
              <div class="pie-center">
                <div class="pie-center-num">8</div>
                <div class="pie-center-title">维修报修</div>
              </div>
            </div>
          </div>
          <div class="zhpg-section3">
            <div class="zhpg-section3-item">
              <div class="item-img"><img src="../assets/images/marketSafety/zhpg_normal_sb.png" alt=""></div>
              <div class="item-title">正常设备</div>
              <div class="item-num">100</div>
              <div class="item-title">占比</div>
              <div class="item-num">90%</div>
            </div>
            <div class="zhpg-section3-item">
              <div class="item-img"><img src="../assets/images/marketSafety/zhpg_warn_sb.png" alt=""></div>
              <div class="item-title">报警设备</div>
              <div class="item-num">34</div>
              <div class="item-title">占比</div>
              <div class="item-num">20%</div>
            </div>
          </div>
          <div class="zhpg-section4">
            <div id="zhpg-line" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <div style="width: 100%;" v-if="xfaqBtnIndex === 2">
          <div class="xfyj-section1">
            <el-carousel
                indicator-position="none"
                :interval="5000"
                height="420px">
              <el-carousel-item v-for="(item, index) in yjListData" :key="index">
                <img :src="item.url" alt="">
                <div class="yqfk-section3-xfyj">
                  <div class="yqfk-section3-xfyj-item">
                    <div class="item-title">区域：</div>
                    <div class="item-text" style="width: 90px;">{{ item.area }}</div>
                  </div>
                  <div class="yqfk-section3-xfyj-item">
                    <div class="item-title">设备位置：</div>
                    <div class="item-text" style="width: 50px;">{{ item.position }}</div>
                  </div>
                  <div class="yqfk-section3-xfyj-item">
                    <div class="item-title" style="width: 90px;">违规情况：</div>
                    <div class="item-text" style="width: 100px;">{{ item.sb }}</div>
                  </div>
                  <div class="yqfk-section3-xfyj-item">
                    <div class="item-title">预警时间：</div>
                    <div class="item-text" style="width: 150px;">{{ item.message }}</div>
                  </div>
                  <div class="yqfk-section3-xfyj-item">
                    <div class="item-title">处置时间：</div>
                    <div class="item-text" style="width: 150px;">{{ item.time }}</div>
                  </div>
                  <div class="yqfk-section3-xfyj-item">
                    <div class="item-title">处置情况：</div>
                    <div class="item-text" style="width: 400px;">{{ item.methods }}</div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="xfyj-section2-title">设备巡检预警</div>
          <div class="xfyj-section2">
            <vue-seamless-scroll
                :data="xfListData"
                class="wrap"
                :class-option="classOption4">
              <div class="xfyj-section3" v-for="(item, index) in xfListData" :key="index">
                <div class="xfyj-section3-item">
                  <div class="item-title">区域：</div>
                  <div class="item-text" style="width: 90px;">{{ item.area }}</div>
                </div>
                <div class="xfyj-section3-item">
                  <div class="item-title">设备位置：</div>
                  <div class="item-text" style="width: 50px;">{{ item.position }}</div>
                </div>
                <div class="xfyj-section3-item">
                  <div class="item-title" style="width: 90px;">设备名称：</div>
                  <div class="item-text" style="width: 100px;">{{ item.sb }}</div>
                </div>
                <div class="xfyj-section3-item">
                  <div class="item-title">预警信息：</div>
                  <div class="item-text" style="width: 90px;">{{ item.message }}</div>
                </div>
                <div class="xfyj-section3-item">
                  <div class="item-title">预警时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.time }}</div>
                </div>
                <div class="xfyj-section3-item">
                  <div class="item-title">处置情况：</div>
                  <div class="item-text" style="width: 400px;">{{ item.methods }}</div>
                </div>
              </div>
            </vue-seamless-scroll>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
name: "marketSafety",
  data () {
    return {
      yqfkBtnIndex: 1,
      yqfkListData: [
        {name: '伟雅琴', job: '女', work: '绿码'},
        {name: '林玉轩', job: '女', work: '绿码'},
        {name: '吴琪', job: '女', work: '绿码'},
        {name: '毛馨兰', job: '女', work: '绿码'},
        {name: '刘浩然', job: '男', work: '绿码'},
      ],
      carListData: [
        {carCard: '新B 73110', carType: '轻卡', from: '山东省-潍坊市', name: '张博庭', tel: '17194052491', goods: '卷心菜、冬瓜', enterTime: '2022/7/5 12:00:00', leaveTime: '未出场'},
        {carCard: '苏N PN397', carType: '微卡', from: '浙江省-杭州市', name: '袁丽燕', tel: '18671083871', goods: '紫角叶', enterTime: '2022/7/6 15:00', leaveTime: '2022/7/7 15:00'},
        {carCard: '粤E M88B6', carType: '中卡', from: '浙江省-金华市', name: '朱柏平', tel: '13404022321', goods: '西兰花、南瓜', enterTime: '2022/7/7 8:00', leaveTime: '2022/7/9 12:00'},
        {carCard: '浙K 8307C', carType: '重卡', from: '安徽省-黄山市', name: '赵梦珍', tel: '18214557999', goods: '空心菜', enterTime: '2022/7/8 10:00', leaveTime: '2022/7/8 12:00'},
        {carCard: '黑H H9978', carType: '微卡', from: '福建省-泉州市', name: '岳腾', tel: '18338183905', goods: '生瓜', enterTime: '2022/7/8 11:00', leaveTime: '2022/7/8 14:00'},
      ],
      ajblLinesOptions: {
        legend: {
          textStyle: {
            color: '#FFFFFF',
            padding: [0,-5,0,-5],
          },
          left: 'right',
          lineStyle: {
            width: 0
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['08/08', '08/11', '08/15']
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 25,
          left: 30,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '进场车辆',
            type: 'line',
            lineStyle: {
              color: '#1AF1FF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#1AF1FF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(26, 241, 255, 0.30)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(26, 241, 255, 0.05)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [55, 82, 78]
          },
          {
            name: '出场车辆',
            type: 'line',
            lineStyle: {
              color: '#00FFAF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#00FFAF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 255, 175, 0.3020)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 255, 175, 0.0510)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [45, 72, 68]
          },
        ]
      },
      xsListData: [
        {time: '2022/7/5 14:58', area: '公共区域', name: '戴灿'},
        {time: '2022/7/4 14:40', area: '公共区域', name: '郭子恒'},
        {time: '2022/7/3 15:20', area: '公共区域', name: '任振兴'},
        {time: '2022/7/2 13:47', area: '公共区域', name: '郑亦男'},
        {time: '2022/7/1 13:56', area: '公共区域', name: '朱贝尔'},
      ],
      xfaqBtnIndex: 1,
      zhpgLinesOptions: {
        title: {
          text: '近7天报警统计',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          }
        },
        legend: {
          textStyle: {
            color: '#FFFFFF',
            padding: [0,-5,0,-5],
          },
          left: 'right',
          top: 20,
          lineStyle: {
            width: 0
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['08/09', '08/10',  '08/11','08/12', '08/13', '08/14', '08/15']
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 45,
          left: 30,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '预警次数',
            type: 'line',
            lineStyle: {
              color: '#1AF1FF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#1AF1FF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(26, 241, 255, 0.30)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(26, 241, 255, 0.05)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [45, 58, 81, 61, 55, 62, 80]
          },
          {
            name: '处置次数',
            type: 'line',
            lineStyle: {
              color: '#00FFAF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#00FFAF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 255, 175, 0.3020)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 255, 175, 0.0510)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [35, 48, 71, 51, 45, 52, 70]
          },
        ]
      },
      yjListData: [
        {area: '蔬菜区', position: '门口', sb: '消防通道占用', message: '2022/7/4 10:18:00', time: '2022/7/5 10:13', methods: '已处理', url: require('../assets/images/temp/temp_market1.jpeg')},
        {area: '建材区', position: '门口', sb: '消防通道占用', message: '2022/7/4 10:18:00', time: '2022/7/5 15:32', methods: '已处理', url: require('../assets/images/temp/temp_market2.jpeg')},
        {area: '生鲜区', position: '门口', sb: '消防通道占用', message: '2022/7/5 10:18:00', time: '2022/7/4 18:31', methods: '已处理', url: require('../assets/images/temp/temp_market1.jpeg')},
        {area: '水产区', position: '门口', sb: '消防通道占用', message: '2022/7/3 10:18:00', time: '2022/7/4 12:55', methods: '已处理', url: require('../assets/images/temp/temp_market2.jpeg')},
        {area: '蔬菜区', position: '门口', sb: '消防通道占用', message: '2022/7/3 10:18:00', time: '2022/7/4 18:53', methods: '已处理', url: require('../assets/images/temp/temp_market1.jpeg')},
      ],
      xfListData: [
        {area: '蔬菜区', position: '门口', sb: '报警装置', message: '已过保质期', time: '2022/7/5 10:13', methods: '已处理', url: require('../assets/images/temp/temp_market1.jpeg')},
        {area: '建材区', position: '门口', sb: '消防栓', message: '设备故障', time: '2022/7/5 15:32', methods: '已处理', url: require('../assets/images/temp/temp_market2.jpeg')},
        {area: '生鲜区', position: '门口', sb: '灭火器', message: '设备故障', time: '2022/7/4 18:31', methods: '已处理', url: require('../assets/images/temp/temp_market1.jpeg')},
        {area: '水产区', position: '门口', sb: '灭火器', message: '设备故障', time: '2022/7/4 12:55', methods: '已处理', url: require('../assets/images/temp/temp_market2.jpeg')},
        {area: '蔬菜区', position: '门口', sb: '灭火器', message: '设备故障', time: '2022/7/4 18:53', methods: '已处理', url: require('../assets/images/temp/temp_market1.jpeg')},
      ],
      gfxjyhListData: [
        {name: '天天批发', type: '企业', num: '913100006311370000', master: '江锦萍', tel: '18766183669'},
        {name: '安心蔬菜', type: '个人', num: '91360982727765186U', master: '周文彰', tel: '18500031142'},
        {name: '水产批发', type: '个人', num: '913100006311370000', master: '朱思伟', tel: '15661882843'},
        {name: '中天伟业', type: '个人', num: '913100006311370000', master: '叶之宇', tel: '18865464469'},
        {name: '东海伟业', type: '个人', num: '9137010016315870XQ', master: '张东科', tel: '18703761455'},
        {name: '鹏程伟业', type: '个人', num: '91350100MA344BY71L', master: '祝原', tel: '15635607866'},
      ],
      ghsListData: [
        {name: '张天启', type: '个人', num: '913100006311370000', master: '江锦萍', tel: '18766183669'},
        {name: '周叶芬', type: '个人', num: '91360982727765186U', master: '周文彰', tel: '18500031142'},
        {name: '水产店', type: '个人', num: '913100006311370000', master: '朱思伟', tel: '15661882843'},
        {name: '于海生', type: '个人', num: '913100006311370000', master: '叶之宇', tel: '18865464469'},
        {name: '赵晓强', type: '个人', num: '9137010016315870XQ', master: '张东科', tel: '18703761455'},
        {name: '周同惠', type: '个人', num: '91350100MA344BY71L', master: '祝原', tel: '15635607866'},
      ],
      goodsListData: [
        {goods: '白菜', kinds: '蔬菜', NO: '22070512', item: '二氧化硫', result: '合格', operator: '天天批发', supTime: '2022/7/1 15:00', checkTime: '2022/7/7 15:00', isDeal: '无须处置'},
        {goods: '鲫鱼', kinds: '水产', NO: '22062388', item: '肉类水分', result: '不合格', operator: '安心蔬菜', supTime: '2022/7/1 15:00', checkTime: '2022/7/7 15:00', isDeal: '复检合格'},
        {goods: '鲤鱼', kinds: '水果', NO: '22050602', item: '肉类水分', result: '不合格', operator: '天天批发', supTime: '2022/7/2 15:00', checkTime: '2022/7/8 15:00', isDeal: '转立案程序'},
        {goods: '辣椒', kinds: '蔬菜', NO: '22062533', item: '亚硝酸盐', result: '不合格', operator: '天天批发', supTime: '2022/7/3 15:00', checkTime: '2022/7/9 15:00', isDeal: '转立案程序'},
        {goods: '韭菜', kinds: '蔬菜', NO: '22070116', item: '农药残留', result: '不合格', operator: '安心蔬菜', supTime: '2022/7/4 15:00', checkTime: '2022/7/10 15:00', isDeal: '监督销毁及无害化处理'},
      ],
    }
  },
  computed: {
    // 公告滚动自定义
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption1() {
      return {
        step: 20, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 580, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption2() {
      return {
        step: 20, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 580, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption3() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption4() {
      return {
        step: 4.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 90, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted() {
    this.initYqfkRadar()
    this.initCarLine()
    this.initXfaqRadar()
    this.initZhpgPie()
    this.initZhpgLine()
    this.initSpaqRadar()
    this.initSpaqBar()
    this.initJcyjBar()
    this.initJcyjPie()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    initYqfkRadar () {
      let aqzs = echarts.init(document.getElementById('yqfk-radar'))
      let option = {
        tooltip: {
          show: true,
          confine: true,
        },
        title: {
          text: '99',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 39
          },
          left: 'center',
          top: '40%'
        },
        radar: {
          radius: '60%',
          center: ['50%', '53%'],
          indicator: [
            {name: '人员核酸检测', max: 100},
            {name: '衢通码', max: 100},
            {name: '日常消杀', max: 100},
            {name: '防疫承诺书', max: 100},
            {name: '商品核酸检测', max: 100},
          ],
          shape: 'circle',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisName: {
            color: '#FFFFFF',
            fontSize: 14,
            padding: [10,0,10,0]
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          }
        },
        series: [
          {
            name: '安全指数',
            type: 'radar',
            symbol: 'circle',
            itemStyle: {
              color: '#19ECFF'
            },
            symbolSize: 5,
            lineStyle: {
              color: '#6EE9FC',
              width: 2
            },
            areaStyle: {
              color: 'rgba(25, 236, 255, 0.2000)'
            },
            label: {
              show: true,
              color: '#00F6FF',
              fontSize: 16
            },
            data: [
              [86, 99 ,93, 88, 90]
            ]
          }
        ]
      }
      aqzs.setOption(option)
    },
    yqfkBtnChange (index) {
      this.yqfkBtnIndex = index
      if (index === 1) {
        setTimeout(() => {
          this.initCarLine(true)
        }, 0)
      }
    },
    initCarLine (clear) {
      if (clear) {
        echarts.init(document.getElementById('car-line')).clear()
      }
      echarts.init(document.getElementById('car-line')).setOption(this.ajblLinesOptions)
    },
    initXfaqRadar () {
      let aqzs = echarts.init(document.getElementById('xfaq-radar'))
      let option = {
        tooltip: {
          show: true,
          confine: true,
        },
        title: {
          text: '99',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 39
          },
          left: 'center',
          top: '40%'
        },
        radar: {
          radius: '55%',
          center: ['50%', '53%'],
          indicator: [
            {name: '设备数量', max: 100},
            {name: '设备巡检', max: 100},
            {name: '设备更新', max: 100},
            {name: '设备维修', max: 100},
            {name: '预警区域', max: 100},
            {name: '设备使用', max: 100},
          ],
          shape: 'circle',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisName: {
            color: '#FFFFFF',
            fontSize: 14,
            padding: [5,0,5,0]
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          }
        },
        series: [
          {
            name: '安全指数',
            type: 'radar',
            symbol: 'circle',
            itemStyle: {
              color: '#19ECFF'
            },
            symbolSize: 5,
            lineStyle: {
              color: '#6EE9FC',
              width: 2
            },
            areaStyle: {
              color: 'rgba(25, 236, 255, 0.2000)'
            },
            label: {
              show: true,
              color: '#00F6FF',
              fontSize: 16
            },
            data: [
              [90, 86 ,87, 93, 90, 92]
            ]
          }
        ]
      }
      aqzs.setOption(option)
    },
    xfaqBtnChange (index) {
      this.xfaqBtnIndex = index
      if (index === 1) {
        setTimeout(() => {
          this.initZhpgPie()
          this.initZhpgLine()
        }, 0)
      }
    },
    initZhpgPie () {
      let pie = echarts.init(document.getElementById('zhpg-pie'))
      let option = {
        tooltip: {

        },
        legend: {
          orient: 'vertical',
          right: 30,
          textStyle: {
            color: '#FFFFFF'
          },
          top: 'center',
          icon: 'circle',
          itemGap: 30
        },
        series: [
          {
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['50%', '70%'],
            color: ['#FF0000', '#5AF772', '#08A4FF'],
            label: {
              show: false
            },
            data: [
              {
                name: '未处理',
                value: 3
              },
              {
                name: '处理中',
                value: 3
              },
              {
                name: '已处理',
                value: 3
              }
            ]
          }
        ]
      }
      pie.setOption(option)
    },
    initZhpgLine (clear) {
      if (clear) {
        echarts.init(document.getElementById('zhpg-line')).clear()
      }
      echarts.init(document.getElementById('zhpg-line')).setOption(this.zhpgLinesOptions)
    },
    initSpaqRadar () {
      let aqzs = echarts.init(document.getElementById('spaq-radar'))
      let option = {
        tooltip: {
          show: true,
          confine: true,
        },
        title: {
          text: '99',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 39
          },
          left: '35%',
          top: '40%'
        },
        radar: {
          radius: '55%',
          center: ['45%', '53%'],
          indicator: [
            {name: '检测合格', max: 100},
            {name: '检测批次', max: 100},
            {name: '商品处置', max: 100},
            {name: '检测项目', max: 100},
            {name: '浙冷链/浙食链', max: 100},
            {name: '经营户', max: 100},
          ],
          shape: 'circle',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisName: {
            color: '#FFFFFF',
            fontSize: 14,
            padding: [5,0,5,0]
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          }
        },
        series: [
          {
            name: '安全指数',
            type: 'radar',
            symbol: 'circle',
            itemStyle: {
              color: '#19ECFF'
            },
            symbolSize: 5,
            lineStyle: {
              color: '#6EE9FC',
              width: 2
            },
            areaStyle: {
              color: 'rgba(25, 236, 255, 0.2000)'
            },
            label: {
              show: true,
              color: '#00F6FF',
              fontSize: 16
            },
            data: [
              [95, 90 ,88, 80, 92, 96]
            ]
          }
        ]
      }
      aqzs.setOption(option)
    },
    initSpaqBar () {
      let bar = echarts.init(document.getElementById('spaq-bar'))
      let option = {
        title: {
          text: '检出商品排行',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['白菜', '青菜',  '空心菜','土豆']
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 30,
          left:30,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 24,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [2,2,0,0]
            },
            data: [78, 61, 52, 36]
          }
        ]
      }
      bar.setOption(option)
    },
    initJcyjBar () {
      let bar = echarts.init(document.getElementById('jcyj-bar'))
      let option = {
        title: {
          text: '检出类目分布',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['二氧化硫', '肉类水分', '亚硝酸盐','农药残留', '吊白块'].reverse()
        },
        grid: {
          top: 30,
          left:60,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 12,
            itemStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [0,2,2,0]
            },
            data: [18, 16, 14, 10, 5].reverse()
          }
        ]
      }
      bar.setOption(option)
    },
    initJcyjPie () {
      let pie = echarts.init(document.getElementById('jcyj-pie'))
      let option = {
        tooltip: {

        },
        legend: {
          orient: 'vertical',
          right: 30,
          textStyle: {
            color: '#FFFFFF'
          },
          top: 'center',
          icon: 'circle',
          itemGap: 15
        },
        series: [
          {
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['0', '70%'],
            color: ['#FFF200', '#FFB34A', '#F7625E', '#08A4FF', '#00EFFF', '#00FFAF'],
            label: {
              show: false
            },
            data: [
              {
                name: '黄瓜',
                value: 3
              },
              {
                name: '豆角',
                value: 3
              },
              {
                name: '豆腐',
                value: 3
              },
              {
                name: '芥末',
                value: 6
              },
              {
                name: '芹菜',
                value: 3
              },
              {
                name: '土豆',
                value: 6
              }
            ]
          }
        ]
      }
      pie.setOption(option)
    },
  }
}
</script>

<style lang="less" scoped>
@import "../assets/style/marketSafety.css";
</style>
